<template>
  <el-card class="common_card_wrapper">
    <el-table
      :data="tableData"
      :border="true"
      v-loading="loading"
      element-loading-text="加载中..."
      row-key="id"
      height="850px"
    >
      <el-table-column prop="name" label="菜单名称" />
      <el-table-column prop="code" label="权限值" />
      <el-table-column prop="updateTime" label="更新时间" />
      <el-table-column prop="action" label="操作" width="350">
        <template #default="{ row }">
          <el-button
            type="primary"
            icon="menu"
            @click="addMenu(row)"
            :disabled="row.level == 4 ? true : false"
          >
            {{ row.level == 3 ? '添加功能' : '添加菜单' }}
          </el-button>
          <el-button
            type="primary"
            icon="edit"
            :disabled="row.level == 1 ? true : false"
            @click="editMenu(row)"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            icon="delete"
            :disabled="row.level == 1 ? true : false"
            @click="delMenu(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 新增/编辑 -->
  <Dialog
    :visible="diaologVisible"
    :dialogConfig="dialogConfig"
    @confirm="save"
    @close="closeDialog"
  >
    <template #content>
      <el-form :model="form" label-width="auto" :rules="rules" ref="menuForm">
        <el-form-item prop="name" label="菜单名称">
          <el-input v-model="form.name" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item prop="code" label="权限值">
          <el-input v-model="form.code" placeholder="请输入权限值" />
        </el-form-item>
      </el-form>
    </template>
  </Dialog>
</template>

<script setup lang="ts" name="MenuManage">
import { ref, onMounted, nextTick } from 'vue'
import { reqMenuList, delMenuReq, addOrUpdateMenuReq } from '@/api/acl/menu'
import { ElMessage, ElMessageBox } from 'element-plus'
import '@/styles/common/index.less'

onMounted(() => {
  getMenuList()
})

let tableData = ref<any>([])
let loading = ref(false)
let diaologVisible = ref(false)
let dialogConfig = ref<any>({
  dialogTitle: '添加菜单',
  dialogWidth: '550px',
  dialogShowClose: true,
  dialogModal: true,
  dialogAlignCenter: false,
  dialogContentCenter: false,
  dialogClickModalClose: false,
  dialogESCModalClose: false,
  dialogDraggable: false,
  dialogFooterBtn: true,
  dialogFootConfirmBtnText: '确定',
  dialogFootCancelBtnText: '取消'
})
const form: any = ref({
  name: '',
  code: '',
  level: '',
  pid: ''
})
const rules = {
  name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
  code: [{ required: true, message: '权限值不能为空', trigger: 'blur' }]
}
let menuForm = ref()
let isAdd = ref(true)
let saveloading = ref(false)

// 获取列表数据
const getMenuList = async () => {
  loading.value = true
  let res: any = await reqMenuList()
  if (res.code === 200) {
    tableData.value = res.data
    loading.value = false
  } else {
    ElMessage.error(res.message)
    loading.value = false
  }
}

// 添加菜单
const addMenu = (data: any) => {
  diaologVisible.value = true
  isAdd.value = true
  form.value = {
    name: '',
    code: '',
    level: data.level + 1,
    pid: data.id
  }
}

// 编辑菜单
const editMenu = (data: any) => {
  diaologVisible.value = true
  dialogConfig.value.dialogTitle = '编辑菜单'
  isAdd.value = false
  Object.assign(form.value, data)
}

// 删除方法
const delMenuMethod = async (id: any) => {
  let res: any = await delMenuReq(id)
  if (res.code === 200) {
    ElMessage.success(res.message)
    getMenuList()
  } else {
    ElMessage.error(res.data ? res.data : res.message)
  }
}

// 删除
const delMenu = (data: any) => {
  ElMessageBox.confirm(`确定删除${data.name}吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    delMenuMethod(data.id)
  })
}

// 新增/编辑方法
const addOrUpdateMenuMethod = async (data: any) => {
  let res: any = await addOrUpdateMenuReq(data)
  if (res.code === 200) {
    ElMessage.success(res.message)
    getMenuList()
    closeDialog()
  } else {
    ElMessage.error(res.data ? res.data : res.message)
  }
  saveloading.value = false
}

// 保存
const save = async () => {
  await menuForm.value.validate(async (valid: any) => {
    if (valid) {
      saveloading.value = true
      addOrUpdateMenuMethod(form.value)
    }
  })
}

// 关闭dialog
const closeDialog = () => {
  diaologVisible.value = false
  nextTick(() => {
    menuForm.value.resetFields()
  })
}
</script>

<style scoped>
.el-form-item__content {
  display: block;
}
</style>
